// task 数据结构
let tasks = [
    {id:1,text:"打羽毛球",completed:false},
    {id:2,text:"上课",completed:true},
    {id:3,text:"跑步",completed:false},
]
console.log(tasks);
// ，获取元素
let addBtn = document.querySelector(".add .addBtn")
let inputText = document.querySelector(".add input")
let ul = document.querySelector(".checkList ul")
let inputSer = document.querySelector(".search input")
// let allBtn = document.querySelector("#allBtn")
// let completed = document.querySelector("#completed")
// let uncompleted = document.querySelector("#uncompleted")
let category = document.querySelector(".category")
console.log(category);
console.log(addBtn);
console.log(inputSer);
// window onload 事件
window.addEventListener('load',function () {
    // 渲染
    renderTasks(tasks) 
});

// 给添加按钮添加点击事件
addBtn.addEventListener('click',function () {
    if (inputText.value.trim() !=="") {
    // 不为空
    // 数据添加
    // 1.产生数据-task对象
    // 数组最后有一个值+1
    let id = tasks[tasks.length-1].id+1;
    // console.log(id);
    // text = inputText.value
    // console.log(text);

    const task = {id:id,text:inputText.value,completed:false}
    // 2.把对象放入tasks数组中
    tasks.push(task)
    // 3.显示下
    console.log(tasks);
    // 4.渲染
    renderTasks(tasks)
    }else{
        window.alert('请输入添加任务信息！')  
    }}
);
// // 给三个按钮添加事件
// // 全部
// allBtn.addEventListener('click' ,function () {
//     renderTasks(tasks)
// })
// // 已完成
// completed.addEventListener('click' ,function () {
//     renderTasks(tasks.filter(task=>task.completed))
// })

// // 未完成
// uncompleted.addEventListener('click' ,function () {
//     renderTasks(tasks)
//     renderTasks(tasks.filter(task=>!task.completed))
// })

//  category添加事件-filter 判断是哪个按钮--事件委托
category.addEventListener('click',function (e) {
    if (e.target.tagName=="BUTTON") {
        // 获取自定义属性中的值
        const filter = e.target.dataset.filter
        // 渲染
        renderTasks(filterTasks(tasks,filter))   
    }
})
// 搜索框enter后修改数据
inputSer.addEventListener('keydown',function (e) {
    // 按下回车键
    if (e.key == 'Enter') {
        // 判断搜索框是否为空
        if (inputSer.value.trim()!="") {
        // 拿搜索框中的值和数组中的每个元素的text值进行搜索得到每一个数组
        let newTask = tasks.filter(function (task) {
            return task.text.includes(inputSer.value.trim())
        })
        renderTasks(newTask)
        }else{
        // 搜索框为空
        window.alert('请输入搜索信息！')
        }
    }
})
// 删除第二种
// 使用事件委托处理删除操作
ul.addEventListener('click',function (e) {
    removeTask(e)
    changeStatus(e) 
    editTask(e)
    
})
// 渲染函数
function renderTasks(tasks) {
    // 清空现有的ul中的
    ul.innerHTML = '';
    tasks.forEach(task => {
        // 创建一个元素
        const li = document.createElement('li')
        // 修改元素内容
        li.innerHTML = `
        <div class="left">
                <input type="checkbox" data-id="${task.id}" ${task.completed?'checked':''}>
                <span class = "${task.completed?'line':''}">${task.text}</span>
               </div>
                <div class="btn">
                    <button class="editBtn" data-id="${task.id}">编辑</button>
                    <button class="delBtn" data-id="${task.id}">删除</button>
                </div>
            `;
        // 修改li中checked属性
        // const input = li.querySelector("input")
        // input.checked = task.completed;
        // console.log(input);

    // 第一种 ：给每个按钮添加点击事件
    //     const delBtn = li.querySelector(".delBtn")
    //     // 点击按钮删除
    //   delBtn.addEventListener('click',function (e) {
    //     removeTask(task.id,e)
    //   })
        // 把元素放到ul中
        ul.appendChild(li) 
    });
    updateCount()
    }

function filterTasks(tasks,filter) {
    switch (filter) {
        case "completed":
            return tasks.filter(task=>task.completed)
        case "uncompleted":
            return tasks.filter(task=>!task.completed)
        default:
            return tasks;
    } 
}
// 改变task的完成属性值
function changeStatus(e) {
    let li;
    if (e.target.nodeName == "INPUT") {
        // 获取task的id值
        const id = e.target.dataset.id;
        console.log(id);
        
        const task = tasks.find(task => task.id=id)
        console.log(task);
        console.log(e.target.checked);
        task.completed = e.target.checked;
        // 修改后样式
        e.target.parentElement.children[1].classList.toggle('line')
        updateCount()
    }  
    
}
// 删除函数
function removeTask(e) {
    let li;
    if (e.target.tagName == "BUTTON"&& e.target.className == "delBtn") {
        console.log(e.target.className);
        // 删除数据
        // 获取task的id值
        const id = e.target.dataset.id;
        tasks = tasks.filter(task => task.id!=id)
        
       
        // 获取包含删除按钮的li元素
        li = e.target.parentElement.parentElement;
        li.remove() 
        updateCount()
    }
    console.log(tasks);
}
// 编辑函数
function editTask(e) {
    let li;
    if (e.target.tagName == "BUTTON"&& e.target.className == "editBtn") {
        console.log(e.target.className);
        // 删除数据
        // 获取task的id值
        const id = e.target.dataset.id;
      console.log(id);
      const task  = tasks.find(task=>task.id==id);
      console.log(id);
      console.log(task);
      showEditAlert(id,task.text)
      
    }
}
// 生成统计
function updateCount() {
     // 底部统计数据的渲染
        // 生成统计
        let all = tasks.length;
        let completed = tasks.filter(task =>task.completed).length
        let uncompleted = all - completed;
        // 修改对应元素的数据
        const spans = document.querySelectorAll('.footer span');
        spans[0].textContent = `全部${all}`;
        spans[1].textContent = `已完成${completed}`;
        spans[2].textContent =`未完成${uncompleted}`;
        // 获取元素的另外的方法
        // document.querySelector('.footer span:nth-child(1)').textContent = `全部${all}`;

}
